<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>员工奖惩信息</title>
    <link rel="stylesheet" href="./common/element/element.css">
</head>

<body>
    <div id="app">
        <h2>员工奖惩信息</h2>
        <el-row>
            <el-col :span="18" style="margin-bottom: 10px">
                <el-input v-model="keywords" style="width: 260px;" placeholder="请输入员工姓名"></el-input>
                <el-button type="info">查询</el-button>
                <el-button type="primary" @click="dialogVisible = true">新增</el-button>
                <el-button type="success">刷新</el-button>
                <el-button type="warning">批量删除</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" stripe border style="width: 99%" @selection-change="selsChange">
            <el-table-column type="selection" width="45" align="center"></el-table-column>
            <el-table-column prop="employname" label="员工" align="center"></el-table-column>
            <el-table-column prop="cate" label="奖惩类型" align="center"></el-table-column>
            <el-table-column prop="reason" label="奖惩原因" align="center"></el-table-column>
            <el-table-column prop="resultx" label="处理意见" align="center"></el-table-column>
            <el-table-column prop="addtime" label="奖惩日期" align="center"></el-table-column>
            <el-table-column prop="manager" label="经手人" align="center"></el-table-column>
            <el-table-column prop="memo" label="备注" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150" align="center">
                <template slot-scope="scope">

                    <el-button type="primary" icon="el-icon-edit" size="small" circle @click="dialogVisible = true"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" circle ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" style="margin-top: 10px">
            <el-pagination background layout="prev, pager, next" :total="total" :current-page="pageNum"
                :page-size="pageSize">
            </el-pagination>
        </el-row>

        <el-dialog title="员工奖惩信息" :visible.sync="dialogVisible">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="员工">
                    <el-select v-model="form.employid" filterable placeholder="请选择员工" value-key="employid">
                        <el-option v-for="item in employ" :key="item.employid" :label="item.employname"
                            :value="item.employid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="奖惩类型">
                    <el-radio v-model="form.cate" label="处罚">处罚</el-radio>
                    <el-radio v-model="form.cate" label="奖励">奖励</el-radio>
                </el-form-item>
                <el-form-item label="奖惩原因">
                    <el-input v-model="form.reason" placeholder="请输入奖惩原因"></el-input>
                </el-form-item>
                <el-form-item label="处理意见">
                    <el-input v-model="form.resultx" placeholder="请输入处理意见"></el-input>
                </el-form-item>
                <el-form-item label="奖惩日期">
                    <el-date-picker v-model="form.addtime" type="date" value-format="yyyy-MM-dd" placeholder="请选择奖惩日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="经手人">
                    <el-input v-model="form.manager" placeholder="请输入经手人"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.memo" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>

    <script src="./common/js/jquery-1.9.0.min.js"></script>
    <script src="./common/js/vue.js"></script>
    <script src="./common/js/axios.min.js"></script>
    <script src="./common/element/element.js"></script>
    <script>
        const vue = new Vue({
            el: '#app',
            data: { 
                tableData: [
                    {
                        "rewardsid": "R20220629211107569920",
                        "employid": "E20220629210755302628",
                        "cate": "处罚",
                        "reason": "未完成工作量",
                        "resultx": "加班4小时",
                        "addtime": "2022-06-28",
                        "manager": "汤姆",
                        "memo": "无",
                        "employname": "BB",
                        "employ": {
                            "employid": "E20220629210755302628",
                            "eno": "E20220629224023",
                            "employname": "BB",
                            "sex": "男",
                            "deptid": "D20220629210342943354",
                            "dutyid": "D20220701220331998483",
                            "xueli": "研究生",
                            "graduate": "南京大学",
                            "contact": "13666666666",
                            "address": "中山路23号",
                            "workdate": "2022-06-30",
                            "memo": "无",
                            "deptname": "开发部",
                            "dutyname": " 程序员",
                            "dept": {
                                "deptid": "D20220629210342943354",
                                "deptname": "开发部",
                                "manager": "BB",
                                "address": "二楼201",
                                "addtime": "2022-06-29",
                                "memo": "无"
                            },
                            "duty": {
                                "dutyid": "D20220701220331998483",
                                "dutyname": " 程序员",
                                "addtime": "2022-07-01",
                                "memo": " 程序员"
                            }
                        }
                    },
                    {
                        "rewardsid": "R20220629211130187598",
                        "employid": "E20220629210755302628",
                        "cate": "奖励",
                        "reason": "超额完成任务",
                        "resultx": "奖励200元",
                        "addtime": "2022-06-28",
                        "manager": "汤姆",
                        "memo": "无",
                        "employname": "CC",
                        "employ": {
                            "employid": "E20220629210755302628",
                            "eno": "E20220629224023",
                            "employname": "CC",
                            "sex": "男",
                            "deptid": "D20220629210342943354",
                            "dutyid": "D20220701220331998483",
                            "xueli": "研究生",
                            "graduate": "南京大学",
                            "contact": "13666666666",
                            "address": "中山路23号",
                            "workdate": "2022-06-30",
                            "memo": "无",
                            "deptname": "开发部",
                            "dutyname": " 程序员",
                            "dept": {
                                "deptid": "D20220629210342943354",
                                "deptname": "开发部",
                                "manager": "CC",
                                "address": "二楼201",
                                "addtime": "2022-06-29",
                                "memo": "无"
                            },
                            "duty": {
                                "dutyid": "D20220701220331998483",
                                "dutyname": " 程序员",
                                "addtime": "2022-07-01",
                                "memo": " 程序员"
                            }
                        }
                    }
                ], //列表数据
                pageSize: 8, // 每页显示行数
                pageNum: 1, // 页码
                total: 0, //数据总数
                dialogVisible: false, //增、改处罚话框是否显示
                form: {}, // 表单数据
                keywords: '', // 查询关键字
            }
        });
    </script>


</body>

</html>